<template>
  <a-list :bordered="false" :split="false" class="file-view-list-congtainer">
    <a-list-item v-for="item in props.fileList" :key="item.id">
      <a-list-item-meta :title="item.filesName">
        <template #avatar>
          <icon-drive-file />
        </template>
      </a-list-item-meta>
      <template #actions>
        <a-space :size="24">
          <span>{{ item.fileSize }}</span>
          <icon-eye style="color: #4e5769" @click="view(item)" />
          <icon-to-bottom style="color: #4e5769" @click="dow(item)" />
        </a-space>
      </template>
    </a-list-item>
  </a-list>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue';
  import { defineProps } from 'vue';

  const props = defineProps({
    fileList: {
      type: Array<any>,
      default: () => [],
    },
  });
  const view = (item: any) => {
    console.log(item);
    Message.warning('暂无此功能');
  };
  const dow = (item: any) => {
    window.open(item.filesUrl);
  };
</script>

<style lang="less" scoped>
  .file-view-list-congtainer {
    :deep(.arco-list-item) {
      margin-bottom: 4px;
      padding: 7px 14px !important;
      background: #f7f9fc !important;
      border-radius: 6px;
    }
  }
</style>
